

<template>
  <!-- <div>
      <h1>个人简介</h1>
      <p>这是个人简介页面。</p>
  </div> -->
  <div class="profile-container">
      <h1 class="profile-title">个人简介</h1>

      <div class="profile-card">
          <div class="info-row">
              <span class="info-label">姓名：</span>
              <span class="info-value">成型</span>
          </div>

          <div class="info-row">
              <span class="info-label">年龄：</span>
              <span class="info-value">20</span>
          </div>

          <div class="info-row">
              <span class="info-label">学校：</span>
              <span class="info-value">顺德职业技术学院</span>
          </div>

          <div class="info-row">
              <span class="info-label">专业：</span>
              <span class="info-value">软件技术</span>
          </div>

          <!-- 可以继续添加其他信息行 -->
      </div>
      <router-link to="/" class="back-link">
          ← 返回首页
      </router-link>
  </div> <!-- 在这里添加profile-container的结束标签 -->
</template>


<!-- <script lang="ts" setup>
// 这里可以添加个人简介页面的逻辑
</script> -->
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ProfilePage',
  setup() {
      return {}
  }
})
</script>

<style scoped>
.profile-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
}

.profile-title {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 2rem;
}

.profile-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.info-row {
  display: flex;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  width: 100px;
  font-weight: bold;
  color: #555;
}

.info-value {
  flex: 1;
  color: #333;
}

.back-link {
  display: inline-block;
  margin-top: 2rem;
  color: #42b983;
  text-decoration: none;
  transition: all 0.3s ease;
}

.back-link:hover {
  color: #3aa876;
  transform: translateX(-5px);
}
</style>